<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 378.994 273.158"
      preserveAspectRatio="none meet"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="1"
          y1="0.5"
          x2="0"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color" stop-opacity="0" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="0.5"
          y1="1"
          x2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" stop-opacity="0" />
          <stop offset="1" :stop-color="states.color" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-4"
          x1="1"
          y1="0.5"
          x2="0"
          y2="0.5"
          xlink:href="#linear-gradient-2"
        />
      </defs>
      <g
        id="组_5049"
        data-name="组 5049"
        transform="translate(-1437.756 -776.422)"
      >
        <rect
          id="矩形_569"
          data-name="矩形 569"
          width="378.994"
          height="264.275"
          transform="translate(1437.756 785.305)"
          :fill="states.color"
          opacity="0.1"
        />
        <path
          id="矩形_569-2"
          data-name="矩形 569"
          d="M2,2V262.275H376.994V2H2M0,0H378.994V264.275H0Z"
          transform="translate(1437.756 785.305)"
          :fill="states.color"
          opacity="0.4"
        />
        <rect
          id="矩形_579_拷贝"
          data-name="矩形 579 拷贝"
          width="378.994"
          height="2"
          transform="translate(1437.756 785.305)"
          fill="url(#linear-gradient)"
        />
        <rect
          id="矩形_579_拷贝_2"
          data-name="矩形 579 拷贝 2"
          width="2"
          height="80"
          transform="translate(1814.75 785.305)"
          fill="url(#linear-gradient-2)"
        />
        <rect
          id="矩形_579_拷贝_5"
          data-name="矩形 579 拷贝 5"
          width="2"
          height="80"
          transform="translate(1437.756 785.305)"
          fill="url(#linear-gradient-2)"
        />
        <path
          id="矩形_571"
          data-name="矩形 571"
          d="M1146.984,750h325.2v2.026H1144Z"
          transform="translate(293.756 29.682)"
          :fill="states.color"
        />
        <path
          id="矩形_584"
          data-name="矩形 584"
          d="M1148,765h190.016l4,5.286H1144Z"
          transform="translate(293.756 11.422)"
          :fill="states.color"
        />
        <rect
          id="矩形_571_拷贝"
          data-name="矩形 571 拷贝"
          width="10"
          height="5"
          transform="translate(1806.75 777.305)"
          :fill="states.color"
        />
        <rect
          id="矩形_571_拷贝_2"
          data-name="矩形 571 拷贝 2"
          width="10"
          height="5"
          transform="translate(1791.75 777.305)"
          :fill="states.color"
          opacity="0.6"
        />
        <rect
          id="矩形_571_拷贝_3"
          data-name="矩形 571 拷贝 3"
          width="9"
          height="5"
          transform="translate(1776.75 777.305)"
          :fill="states.color"
          opacity="0.2"
        />
        <rect
          id="矩形_576"
          data-name="矩形 576"
          width="6"
          height="7"
          transform="translate(1444.756 792.305)"
          :fill="states.color"
        />
        <rect
          id="矩形_576_拷贝"
          data-name="矩形 576 拷贝"
          width="7"
          height="7"
          transform="translate(1455.756 792.305)"
          :fill="states.color"
          opacity="0.6"
        />
        <rect
          id="矩形_576_拷贝_2"
          data-name="矩形 576 拷贝 2"
          width="7"
          height="7"
          transform="translate(1466.756 792.305)"
          :fill="states.color"
          opacity="0.2"
        />
        <rect
          id="矩形_579_拷贝_3"
          data-name="矩形 579 拷贝 3"
          width="378.994"
          height="2"
          transform="translate(1437.756 785.305)"
          fill="url(#linear-gradient-4)"
        />
        <path
          id="形状_570"
          data-name="形状 570"
          d="M1627,887.951h17.767V869Z"
          transform="translate(167.973 157.234)"
          :fill="states.color"
          opacity="0.8"
        />
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
